<template>
  <section class="gifts-box">
    <tab :tabs="tablist" activeName="giftcenter"></tab>
    <div class="no-content" v-if="giftLists.length === 0 && surplusNum === 0">暂时没有可领取的礼包</div>
    <template v-else>
      <div class="gifts-wrapper" v-for="(child, index) in giftLists" :key="index">
        <img class="gift-img" src="../../../images/gift_icon.png" />
        <div class="gifts-info">
          <p class="title">{{child.title}}</p>
          <span class="describe">{{child.content}}</span>
        </div>
        <span class="btn-receive" @click="fetchGiftOne(child.id, child.status, child.type)" >立即领取</span>
      </div>
      <div class="gifts-wrapper" v-if="surplusNum > 0">
        <img class="gift-img" src="../../../images/gift_icon.png" />
        <div class="gifts-info">
          <p class="title">品牌券礼包</p>
          <span class="describe">品牌券</span>
        </div>
        <router-link :to="{name: 'brandVoucher'}" class="btn-receive" >立即领取</router-link>
      </div>
    </template>
    <section class="luck-box" v-if="luckshow">
      <div class="luck-wrapper">
        <img class="gift_left" src="../../../images/gift_left.png"/>
        <img class="gift_right" src="../../../images/gift_right.png"/>
        <div class="luck-content">
          <div class="luck-top">
            <i class="el-icon-close close-text" @click="luckshow = false"></i>
            <p class="title">恭喜您，中奖啦！</p>
            <span class="content">恭喜您获得{{lotteryObj.amount}}元优惠券</span>
            <div class="luck-num-box">
              <span class="number"><em class="small-tag">¥</em>{{lotteryObj.amount}}</span>
              <p class="desribe">{{lotteryObj.description}}</p>
              <span class="effectivedate">有效期：{{lotteryObj.receivingTime | filterDate}} - {{lotteryObj.overdueTime | filterDate}}</span>
            </div>
          </div>
          <div class="luck-button-box">
            <span class="btn-order" @click="immediateOrder">立即下单</span>
          </div>
        </div>
      </div>
    </section>
    <div class="v-modal" tabindex="2" style="z-index: 2000;" v-if="luckshow"></div>
  </section>
</template>

<script>
import {tab} from '@/components/index'
import {getGiftCenter, pickGiftOne, lotteryDraw} from '@/service/get-data'
import {giftTypes} from '@/tool/index'
import {getCookie} from '@/config/mUntils'
import {mapState, mapActions} from 'vuex'
export default {
  components: {
    tab
  },
  data () {
    return {
      page: 1,
      giftLists: [],
      luckshow: false,
      lotteryObj: {},
      tablist: [{name: 'giftcenter', text: '礼包中心'}]
    }
  },
  computed: {
    ...mapState({
      cartlength: state => state.shopcart.cartlength,
      surplusNum: state => state.levelInfoObj.surplusNum
    }),
    giftTypes () {
      return giftTypes
    },
    Exam () {
      return getCookie('Exam') - 0
    }
  },
  methods: {
    ...mapActions(['getUserLevelInfo']),
    // 礼包列表
    async fetchGiftCenter () {
      let res = await getGiftCenter(this.page)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        res = res.data
        this.giftLists = res.data.list
        this.$store.commit('UNRECEIVED', this.giftLists.length)
      } else {
        this.$message.error(res.data.resultMsg)
      }
    },
    // 领取一个礼包
    async fetchGiftOne (id, status, type) {
      if (status) return
      if (type === 1) {
        this.fetchlotteryDraw(id).then(() => {
          this.fetchGiftCenter()
        })
        return
      }
      let res = await pickGiftOne(id)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.$message({
          type: 'success',
          message: '领取成功!可到优惠卡券查看.'
        })
        this.fetchGiftCenter()
      } else {
        this.$message.error(res.data.data)
      }
    },
    // 抽奖
    async fetchlotteryDraw (id) {
      let res = await lotteryDraw(id)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.lotteryObj = res.data.data
        this.boolreward = false
        this.luckshow = true
      }
    },
    immediateOrder () {
      this.luckshow = false
      if (this.cartlength === 0) {
        this.$message({
          message: '购物车为空,请先添加下单的商品'
        })
        return
      }
      this.$router.push({name: 'ShopCart'})
    }
  },
  mounted () {
    this.getUserLevelInfo()
    this.fetchGiftCenter()
  },
  filters: {
    filterDate (value) {
      if (!value) return ''
      value = value.split(' ')[0]
      return value
    }
  }
}
</script>

<style lang="scss" scoped>
  .gifts-box{
    // margin: -26px -52px;
  }
  .gifts-wrapper{
    position: relative;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 40px 52px 40px 0;
    border-bottom: 1px solid #EEEEEE;
    margin-top: -20px;
    .gifts-info{
      display: inline-block;
    }
    .gift-img{
      width: 45px;
      margin-right: 20px;
    }
    .title{
      font-size: 18px;
      color: #333333;
      line-height: 25px;
      margin-bottom: 7px;
    }
    .describe{
      font-size: 14px;
      color: #666666;
    }
  }
  .btn-receive{
    float: right;
    margin-top: 8px;
    vertical-align: middle;
    width: 88px;
    height: 32px;
    line-height: 32px;
    background: #FFCC00;
    border-radius: 4px;
    color: #303030;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }
  .yet{
    background: #EEEEEE;
    color: #6B6B6B;
  }
</style>
